
<xmp type="template" name="commodity">
	<div bind-class="{{class}}">
		 <div class="img">
		 	<div>	
            	{{#each imgs}}
            	<img bind-src="{{src}}" />
            	{{/each}}
            </div>
        </div>
        <div class="detail">
            <div>
                <span>{{price}}</span>
                <span>{{outline}}</span>
            </div>
            <div>{{store}}</div>
        </div>
	</div>
</xmp>
<script type="text/vm" name="commodity">
function(vm) {
	var imgModel = vm.queryElement({
	    className: "img"
	})[0];
	console.log(imgModel)
	require(["jQuery"], function($) {
	    var imgBox = $(imgModel).find("div");
	    var imgs = imgBox.find("img");
	    console.log(imgs.length);
	    var i = 1;
	    timer = setInterval(function() {
	        imgBox.animate({
	            bottom: 200 * (i % imgs.length)
	        }, 800);
	        i += 1;
	    }, 3500);
	});
}
</script>



<!-- <xmp type="template" name="pictureWall">
	<div class="pictureWall">
		<div class="banner">		
			<div class="bannerList">
				{{#each imgs}}
					<a bind-href="{{href}}"><img bind-src="{{src}}" /></a>
				{{/each}}
			</div>
		</div>
		<div class="sequence">
			<ul>				
				{{#each lis}}
				<li>{{liTitle}}</li>
				{{/each}}
			</ul>
		</div>
	</div>
</xmp> -->
<script type="text/vm" name="pictureWall">
function(vm) {
	var imgWall=vm.queryElement({
		className: "imgBox"
	})[0];
	var liModel=vm.queryElement({
		tagName:"UL"
	})[0];
	console.log(imgWall);
	console.log(liModel);


	require(["jQuery"], function($) {	    
	    var imgBox = $(imgWall).find(".imgWallImg");
	    var imgs = imgBox.find("img");
	    // console.log(imgs.length);
	    var w=$(".pictureWall").css('width');
	    w=w.substr(0,(w.length)-2);
	    // console.log(w);
	    var imgArray=[];
	    for (var i = 0; i < imgs.length; i++) {
	    	imgArray[i]=$(imgs[i]).clone();
	    	// console.log(imgArray[i]);
	    };
	    timer = setInterval(function() {
	    		
	    }, 2500);
	});
	
}
</script>


<xmp type="template" name="text">
	<div bind-class="{{class}}">
		<span>{{title}}</span><input type="text" />
	</div>
</xmp>

<xmp type="template" name="main-goods-test">
    <div class="commodity">
        <div class="commodityImg">
            <div class="eachChild">
                <a bind-href="{{href}}">
                    <img src="{{src}}" bind-style="width:{{width}};height:{{height}};left:{{left}};top:{{top}}" bind-title="{{title}}" />
                </a>
            </div>
            <div class="hidden">
            	<img class="hide-img" src="{{src2}}">
            </div>
        </div>
        <div class="dec">
        	<div class="item">{{name}}</div>
        	<div class="item">￥{{price}}</div>
        	<div class="item">{{count}}</div>
        </div>
    </div>
</xmp>
<script type="text/vm" name="main-goods-test">
// function(vm) {
//     var eachChild=vm.queryElement({
//         className:"eachChild"
//     })[0];
//     var imgs=vm.queryElement({
//         tagName:"IMG"
//     });
//     // console.log($(eachChild));
//     require(["jQuery"], function($) {
//         var index=0;
//         var width=$(imgs[0]).css("width").split("p")[0];
//         var n=$(imgs).length;
//         console.log(width)
//         timer = setInterval(function() {
//             $(eachChild).animate({
//                 right: width*(index%n)
//             }, 500);
//             index+=1;
//         }, 1800);
//     });

//     function getRadom(){
//         var a=0;
//         while(a<4000){
//             var a=Math.random()*10000
//         }
//         console.log(a);
//         return a;
//     }
// }
</script>
